import React, { useState, memo, useMemo, useCallback, useEffect } from 'react';

const set = new Set();

// function Callback() {
//     const [count, setCount] = useState(1);
//     const [val, setVal] = useState('');

//     const callback = useCallback(() => {
//         console.log(count);
//     }, [count]);
//     set.add(callback);

//     return <div>
//         <h4>{count}</h4>
//         <h4>{set.size}</h4>
//         <div>
//             <button onClick={() => setCount(count + 1)}>+</button>
//             <input value={val} onChange={event => setVal(event.target.value)} />
//         </div>
//     </div>;
// }

function Parent() {
    const [count, setCount] = useState(1);
    const [val, setVal] = useState('');

    const callback = useCallback(() => {
        return count;
    }, [count]);
    return <div>
        <h4>{count}</h4>
        <Child callback={callback} />
        <div>
            <button onClick={() => setCount(count + 1)}>+</button>
            <input value={val} onChange={event => setVal(event.target.value)} />
        </div>
    </div>;
}

function Child({ callback }) {
    const [count, setCount] = useState(() => callback());
    useEffect(() => {
        setCount(callback());
        console.log(setCount, 'innner');
    }, [callback]);
    return <div>
        {count}
    </div>;
}
export default () => {
    return (
        <>
            <Parent />
        </>
    );
};